<template>
  <div class="daraBoardLint_content grid">
    <div class="line_list  " v-for="(item, inx) in list" :key="inx">
      <div class="header_title flex flex-ac">
        <div class="icon">
          <img :src="item.icon" class="img" />
        </div>
        <div class="title ml-10 bold650">{{ item.title }}</div>
      </div>
      <div class="number_box flex pt-5">
        <div class="number_left flex flex-c flex-ac pt-5">
          <div class="num flex">
            {{ item.receivedQuantity || 0 }}
            <text>小区</text>
          </div>
          <div class="txt">签约数</div>
        </div>
        <div class="shu"></div>
        <div class="number_right flex flex-c flex-ac  pt-5">
          <div class="num flex flex-ac">
            {{ item.receiv || 0 }}
            <text>小区</text>
          </div>
          <div class="txt">已收运</div>
        </div>
        <div class="shu"></div>
        <div class="number_right flex flex-c flex-ac pt-5">
          <div class="num flex flex-ac">
            {{ item.unreceiv || 0 }}
            <text>小区</text>
          </div>
          <div class="txt">签约未收运</div>
        </div>
        <div class="shu"></div>
        <div class="number_right flex flex-c flex-ac  pt-5">
          <div class="num flex flex-ac">
            {{ item.collectionVolume || 0 }}
            <text>桶</text>
          </div>
          <div class="txt">签约收运量</div>
        </div>
        <!-- <div class="shu"></div>
        <div class="number_right flex flex-c flex-ac pt-10">
          <div class="num flex flex-ac">
            {{ item.valList[4] }}
            <text>邀约</text>
          </div>
          <div class="txt">接受</div>
        </div>
        <div class="shu"></div>
        <div class="number_right flex flex-c flex-ac pt-10">
          <div class="num flex flex-ac">
            {{ item.valList[5] }}
            <text>邀约</text>
          </div>
          <div class="txt">拒绝</div>
        </div> -->
      </div>
      <div class="yaoyue_box flex flex-ac flex-jsb mt-20">
        <div class="yaoyue_left flex flex-ac flex-jsb mr-20">
          <text>接受邀约</text>
          <div class="num">{{ item.stayCount || 0 }}</div>
        </div>
        <div class="yaoyue_right flex flex-ac flex-jsb ">
          <text>被拒邀约</text>
          <div class="num">{{ item.cooperationCount || 0 }}</div>
        </div>
      </div>
    </div>
  </div>
</template>
<script lang="ts" setup>
import {
  ref,
  computed,
  watch,
  onMounted,
  onBeforeUnmount,
  reactive,
  shallowRef,
  onUnmounted,
} from "vue";
import { useStore } from "vuex";
const store = useStore();
const props = defineProps<{}>();
const contract = new URL("@/assets/img/png/contract.png", import.meta.url).href;
const outsource = new URL("@/assets/img/png/outsource.png", import.meta.url).href;
import {
  getUserInfo,
} from "@/utils/auth";
import { useMousePosition } from "@/hooks/dateSelect";
const { timeType } = useMousePosition();
import {
  quantityStatisticsApi
} from "@/api/contract";

let list: any = ref([
  { title: "承包", icon: contract, },
  { title: "外包", icon: outsource, },
]);
//   {
//     title: "承包",
//     businessType: 0,//
//     cooperationCount: 0,// 被拒数
//     collectionVolume: 0,// 收运量 
//     receiv: 0,// 已收运 
//     receivedQuantity: 0,// 签约数 
//     stayCount: 0,// 发出数 
//     unreceiv: 0,// 未收运
//     icon: contract,

//   },
//   {
//     title: "外包",
//     businessType: 0,//
//     cooperationCount: 0,// 被拒数
//     collectionVolume: 0,// 收运量 
//     receiv: 0,// 已收运 
//     receivedQuantity: 0,// 签约数 
//     stayCount: 0,// 发出数 
//     unreceiv: 0,// 未收运
//     icon: outsource,
//   },


onMounted(() => { });

onBeforeUnmount(() => { });
onUnmounted(() => { });

onBeforeUnmount(() => { });
const userInfo = ref<any>({});
watch(
  timeType,
  () => {
    init();
  },
  {
    immediate: true,
  }
);
function init() {
  if (!userInfo.value?.unitId) {
    try {
      userInfo.value = JSON.parse(getUserInfo());

    } catch (err) { }
  }
  getBucketLicensePlateList();
}
// 企业业务中心-通过单位id查询数量统计
async function getBucketLicensePlateList() {
  list.value = [
    { title: "承包", icon: contract, },
    { title: "外包", icon: outsource, },
  ]
  let info = {
    unitId: userInfo.value?.unitId,
  };
  const res = await quantityStatisticsApi(info);
  if (res.status != 200) return;
  console.log("企业业务中心-通过单位id查询数量统计", res, res?.data);
  let { result = {} } = res?.data;
  list.value = result
  list.value[0].title = "承包"
  list.value[1].title = "外包"
  list.value[0].icon = contract
  list.value[1].icon = outsource

}
</script>

<style lang="scss" scoped>
.daraBoardLint_content {
  grid-template-rows: 1fr 1fr;

  // grid-gap: 10px;
  .line_list {
    background: #fff;
    width: 100%;
    border-radius: 6px;
    padding: 2px 12px 8px 12px;

    &:first-child {
      margin-bottom: 10px;
    }
  }

  .header_title,
  .main_title {
    height: 40px;

    .icon {
      width: 22px;
      height: 22px;

      .img {
        width: 100%;
        height: 100%;
      }
    }

    .title {
      font-size: 15px;
      color: #333333;
    }
  }

  .number_box {
    width: 100%;

    .number_left {
      width: 40%;
    }

    .number_right {
      width: 60%;
    }

    .shu {
      width: 1px;
      height: 50px;
      background: #e8e8e8;
    }

    .num {
      font-size: 16px;
      font-weight: 550;
      color: #1890ff;
      align-items: baseline;
      padding-bottom: 10px;

      text {
        margin-left: 5px;
        font-size: 11px;
        vertical-align: bottom;
        color: #333333;
      }
    }

    .txt {
      font-size: 11px;
      color: #999999;
    }
  }

  .yaoyue_box {

    .yaoyue_left,
    .yaoyue_right {
      width: 50%;
      background: #f9f9f9;
      border-radius: 4px;
      padding: 10px 20px;
      color: #999999;

      .num {
        color: #1890ff;
        font-size: 16px;
        font-weight: 550;
      }
    }
  }
}
</style>